<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆角</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				border: #0000FF 2px solid;
				/**
				 * 圆角
				 * border-radius是简写属性
				 * 一个半径时确定一个圆形
				 *  border-top-left-radius:1em;
				 *	border-top-right-radius:1em;
				 *	border-bottom-right-radius:1em;
				 *	border-bottom-left-radius:1em;
				 * 当使用两个半径时确定一个椭圆(半长轴，半短轴)
				 *
				 *例如：
				 *border-radius: 1em/5em;
				 *
				 *等价于：
				 *
				 *border-top-left-radius:     1em 5em;
				 *border-top-right-radius:    1em 5em;
				 *border-bottom-right-radius: 1em 5em;
				 *border-bottom-left-radius:  1em 5em;
				 *
				 *border-radius: 4px 3px 6px / 2px 4px;
				 *
				 *等价于：
				 *
				 *border-top-left-radius:     4px 2px;
				 *border-top-right-radius:    3px 4px;
				 *border-bottom-right-radius: 6px 2px;
				 *border-bottom-left-radius:  3px 4px;
				 */
				border-radius: 10px;
			}
			.box2{
				margin-top: 10px;
				width: 100px;
				height: 100px;
				border: #008000 2px solid;
				/* the border will curve into a 'D' */  
				  border-radius: 10px 40px 40px 10px;
			}
			.box3{
				margin-top: 10px;
				width: 100px;
				height: 100px;
				border: #008000 2px solid;
				border-radius: 13em/3em;
			}
			.box4{
				margin-top: 10px;
				width: 100px;
				height: 100px;
				border: #008000 2px solid;
				border-radius: 50%;
			}
			.box5{
				margin-top: 10px;
				width: 100px;
				height: 100px;
				border: #008000 2px solid;
				border-top-left-radius: 10px;
				border-top-right-radius: 30px 50px;
				border-bottom-left-radius: 30px 50px;
				border-bottom-right-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
	</body>
</html>
